<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body{
            text-align: center;
        }
        #myCanvas{
            background: pink;
            background-image: url('../1.prepare/img/1.jpg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }


    </style>
</head>
<body>

<canvas id="myCanvas" width="700" height="500"></canvas>
</body>
<script type="text/javascript">
    window.onload = function () {
        var myCanvas = document.getElementById('myCanvas');
        var painting = myCanvas.getContext('2d');
        //目标图像  你已经放到上面的图片
        painting.beginPath();
        painting.fillStyle = 'blue';
        painting.fillRect(0,0,700,500);

        //分界线        
        painting.globalCompositeOperation = 'destination-out';

        //源图像  你打算放到画布上的图片
        // painting.beginPath();
        // painting.fillStyle = 'red';
        // painting.fillRect(100,100,100,200);
        myCanvas.onmousedown = function(e){
            painting.beginPath();
            var x = e.clientX - myCanvas.offsetLeft;
            var y = e.clientY - myCanvas.offsetTop;
            painting.arc(x,y,20,0,2*Math.PI,false);
            painting.fill();
            document.onmousemove = function(e){
                painting.beginPath();
                var x = e.clientX - myCanvas.offsetLeft;
                var y = e.clientY - myCanvas.offsetTop;
                painting.arc(x,y,20,0,2*Math.PI,false);
                painting.fill();
            }
            document.onmouseup = function(){
                document.onmousemove = null;
            }
        }
     
    }
</script>
</html>